<template>
	<view class="survey-page">
		<view class="header">
			<text class="title">问卷调查</text>
			<text class="subtitle">感谢参与，您的反馈将帮助我们更好地优化服务</text>
		</view>

		<view class="form">
			<!-- 年龄 -->
			<view class="form-item">
				<text class="label">您的年龄是？</text>
				<input class="input" type="number" v-model.number="form.age" placeholder="请输入年龄（数字）" />
			</view>

			<!-- 关注公益 -->
			<view class="form-item">
				<text class="label">您会关注公益吗？</text>
				<radio-group class="radios" @change="onChange('charity', $event)">
					<label v-for="opt in ynOptions" :key="'charity-' + opt.value" class="radio-item">
						<radio :value="opt.value" :checked="form.charity === opt.value" />
						<text>{{ opt.label }}</text>
					</label>
				</radio-group>
			</view>

			<!-- 关注足球 -->
			<view class="form-item">
				<text class="label">您关注足球吗？</text>
				<radio-group class="radios" @change="onChange('football', $event)">
					<label v-for="opt in ynOptions" :key="'football-' + opt.value" class="radio-item">
						<radio :value="opt.value" :checked="form.football === opt.value" />
						<text>{{ opt.label }}</text>
					</label>
				</radio-group>
			</view>

			<!-- 心情不好 -->
			<view class="form-item">
				<text class="label">心情不好你会？</text>
				<radio-group class="radios" @change="onChange('badMood', $event)">
					<label v-for="opt in moodOptions" :key="'mood-' + opt.value" class="radio-item">
						<radio :value="opt.value" :checked="form.badMood === opt.value" />
						<text>{{ opt.label }}</text>
					</label>
				</radio-group>
			</view>

			<!-- 抽烟情况 -->
			<view class="form-item">
				<text class="label">您平常抽？</text>
				<radio-group class="radios" @change="onChange('smoke', $event)">
					<label v-for="opt in smokeOptions" :key="'smoke-' + opt.value" class="radio-item">
						<radio :value="opt.value" :checked="form.smoke === opt.value" />
						<text>{{ opt.label }}</text>
					</label>
				</radio-group>
			</view>

			<!-- 厌食症 -->
			<view class="form-item">
				<text class="label">您会有厌食症吗？</text>
				<radio-group class="radios" @change="onChange('anorexia', $event)">
					<label v-for="opt in ynOptions" :key="'anorexia-' + opt.value" class="radio-item">
						<radio :value="opt.value" :checked="form.anorexia === opt.value" />
						<text>{{ opt.label }}</text>
					</label>
				</radio-group>
			</view>

			<!-- 虚拟币了解 -->
			<view class="form-item">
				<text class="label">您了解虚拟币吗？</text>
				<radio-group class="radios" @change="onChange('crypto', $event)">
					<label v-for="opt in ynOptions" :key="'crypto-' + opt.value" class="radio-item">
						<radio :value="opt.value" :checked="form.crypto === opt.value" />
						<text>{{ opt.label }}</text>
					</label>
				</radio-group>
			</view>

			<!-- 是否参与 -->
			<view class="form-item">
				<text class="label">您想参与吗？</text>
				<radio-group class="radios" @change="onChange('join', $event)">
					<label v-for="opt in ynOptions" :key="'join-' + opt.value" class="radio-item">
						<radio :value="opt.value" :checked="form.join === opt.value" />
						<text>{{ opt.label }}</text>
					</label>
				</radio-group>
			</view>
            <!-- 是否参与 -->
            <view class="form-item">
				<text class="label">您的联系方式</text>
				<input class="input" type="text" v-model.number="form.phone" placeholder="请输入联系方式" />
			</view>
			<!-- 提交 -->
			<view class="submit-box">
				<button class="submit-btn" @click="onSubmit">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
import { postQuestionnaire } from '@/api/user';
export default {
	name: 'SurveyPage',
	data() {
		return {
			form: {
				age: '',
				charity: '',
				football: '',
				badMood: '',
				smoke: '',
				anorexia: '',
				crypto: '',
				join: ''
			},
			ynOptions: [
				{ label: '是', value: 'yes' },
				{ label: '否', value: 'no' }
			],
			moodOptions: [
				{ label: '运动', value: 'sport' },
				{ label: '听歌', value: 'music' },
				{ label: '游戏', value: 'game' },
				{ label: '吃点好吃的', value: 'eat' },
				{ label: '其他', value: 'other' }
			],
			smokeOptions: [
				{ label: '不抽', value: 'none' },
				{ label: '偶尔', value: 'sometimes' },
				{ label: '经常', value: 'often' }
			]
		};
	},
	methods: {
		onChange(key, e) {
			this.form[key] = e.detail.value;
		},
		onSubmit() {
			if (!this.form.age) {
				uni.showToast({ title: '请填写年龄', icon: 'none' });
				return;
			}
			// 模拟提交
			console.log('survey submit', this.form);
			postQuestionnaire(this.form).then(res => {
				console.log(res);
				uni.showToast({ title: '提交成功，感谢参与！', icon: 'success' });
				setTimeout(() => {
					uni.navigateBack({ delta: 1 });
				}, 1200);
			});
			
		}
	}
};
</script>

<style scoped lang="less">
	.survey-page { padding: 24rpx; background: #f7f8fa; min-height: 100vh; }
	.header { display: flex; flex-direction: column; gap: 8rpx; margin-bottom: 20rpx; }
	.title { font-size: 36rpx; font-weight: 600; color: #111; }
	.subtitle { font-size: 26rpx; color: #666; }

	.form { display: flex; flex-direction: column; gap: 22rpx; }
	.form-item { background: #fff; border-radius: 16rpx; padding: 20rpx; }
	.label { font-size: 30rpx; color: #333; margin-bottom: 12rpx; display: block; }
	.input { background: #f7f7f7; border-radius: 12rpx; padding: 16rpx 20rpx; font-size: 28rpx;height: 64rpx; }
	.radios { display: flex; flex-wrap: wrap; gap: 24rpx; margin-top: 6rpx; }
	.radio-item { display: flex; align-items: center; gap: 10rpx; padding: 8rpx 12rpx; border-radius: 12rpx; background: #fafafa; }

	.submit-box { margin-top: 10rpx; }
	.submit-btn { width: 100%; height: 80rpx; line-height: 80rpx; border-radius: 18rpx; text-align: center; color: #fff; font-size: 30rpx; background: linear-gradient(90deg, #16a34a, #22c55e); box-shadow: 0 10rpx 24rpx rgba(34,197,94,0.25); }
</style>

